<template>
  <div class="class_container">
    <div class="class_title">
      <img src="/assets/image/home_modu_icon_3@2x.png" alt=""> 法治云课堂

      <span class="fr videoButton" @click="toVideolist()">
        视频轮播
      </span>
    </div>

    <div class="class_item">
      <div class="imgItem imglist" v-for="item in couseList" :key="item.id" @click="toDetails(item)">
        <div>
          <img :src="item.courseImg" alt="">
          <p>{{item.courseName}}</p>
        </div>

      </div>
    </div>

    <div class="pagination" v-if="total>0">
      <el-pagination :page-size="1" :hide-on-single-page="value" background layout="prev, pager, next" :total="total" @prev-click="current_change" @next-click="current_change" @current-change="current_change">
      </el-pagination>
    </div>

  </div>
</template>

<script>
import path from '@/network'
export default {
  name: 'App',
  data () {
    return {
      total: 0,
      pagesize: 6,
      currentPage: 1,
      couseList: [],
    };
  },
  mounted () {
    this.getCourseList();
  },

  methods: {

    toVideolist: function () {
      this.$router.push({ name: 'videolist', query: { title: this.$route.query.title } })
    },
    toDetails: function (item) {
      this.$router.push({ name: 'classDetails', query: { id: item.id, title: this.$route.query.title } })
    },
    //获取list
    getCourseList () {
      path.getCourseList(
        this.currentPage,
        this.pagesize,
      ).then(res => {
        if (res.success === 0) {
          this.couseList = res.rows
          this.list = res.rows;
          this.total = res.totalPage;
        }

      })
    },

    current_change: function (currentPage) {
      this.currentPage = currentPage;
      this.getCourseList();
    },

  }
}
</script>